// pages/feedback/index.js
/**
 * 1、点击 + 号触发点击事件
 *  1、调用小程序内置的选择图片的api
 *  2、获取到图片的路径，为数组格式
 *  3、把图片路径存入到data中的变量中
 *  4、页面可以根据图片数组进行循环显示   自定义组件
 * 2、点击自定义图片组件
 *  1、获取被点击的元素的索引
 *  2、获取data中的图片数组
 *  3、根据索引 删除数组中的对应的元素
 *  4、把数组重新设置回data中
 * 3、点击提交
 *  1、获取文本域的内容
 *  2、对内容的合法性进行验证
 *  3、验证通过 用户选择的图片上传到专用的图片服务器，返回图片外网链接
 *      1、 遍历图片数组
 *      2、挨个上传
 *      3、自己再维护图片数组，存放图片上传后的外网的链接
 *  4、文本域和外网的图片路径一起提交到服务器
 *  5、清空当前页
 *  6、返回上一页
 */
Page({
    
    /**
     * 页面的初始数据
     */
    data: {
        tabs:[
            {
                id:0,
                value:"体验问题",
                isActive:true
            },
            {
                id:1,
                value:"商品/商家投诉",
                isActive:false
            }
        ],
        //被选中的图片的路径  数组
        chooseImgs:[],
        //文本域的内容
        textVal:''
    },
    //外网的图片的路径数组
    UpLoadImg:[],
    //标题点击事件，从子组件传递过来
    handleTabsItemChange(e){
        console.log(e);
        //1、获取被点击的标题索引
        const {index} = e.detail;
         //2、修改源数组
        let {tabs} = this.data;
        tabs.forEach((v,i)=>i===index?v.isActive=true:v.
        isActive=false);
        this.setData({
            tabs
        })
    },

    //点击加号选择上传图片事件
    hangleChooseimg(e){
        //2、调用小程序内置的选择图片的api
        wx.chooseImage({
          //1、同时选择的图片数量
          count: 9,
          //图片格式  原图  压缩
          sizeType: ['original','compressed'],
         //图片的来源，相册，照相机
          sourceType: ['album','camera'],
          success: (result) => {
              console.log(result);
              this.setData({
                  //图片数组  进行拼接  多次选择
                //chooseImgs:result.tempFilePaths
                chooseImgs:[...this.data.chooseImgs,...result.tempFilePaths]
              })
          },
        })
    },

    //点击自定义图片组件
    handleRemoveImg(e){
        //获取被点击的组件的索引
        const {index} = e.currentTarget.dataset;
        console.log(index);
        //获取data中的图片数组
        let {chooseImgs} = this.data;
        //4、删除元素
        chooseImgs.splice(index,1)
        this.setData({
            chooseImgs
        })
    },

    //文本域的输入事件
    handleTextInput(e){
        this.setData({
            textVal:e.detail.value
        })
    },

    //提交按钮点击事件
    handleFormSubmit(){
        //1、获取文本域的内容 图片数组
        const {textVal,chooseImgs} = this.data;
        //2、合法性验证
        if(!textVal.trim()){
            //不合法
            wx.showToast({
              title: '输入不合法，请输入内容',
              icon:'none',
              mask:true,
            })
            return;
        };
        //显示正在等待的图片
        wx.showLoading({
          title: '正在上传中...',
          mask:true
        });
        //3、准备上传图片到专门的图片服务器
        //上传文件的api不支持多个文件同时上传
        //判断是否存在图片
        if(chooseImgs.length !=0){
            chooseImgs.forEach((v,i)=>{
                var upTask = wx.uploadFile({
                //被上传的文件的路径
                filePath: v,
                //上传的文件的名称，后台来获取文件
                name: "file",
                //图片要上传的地方
                url: 'https://imgchr.com/i/MjaXxU',
                //上传的时候顺带的文本信息
                formData:{},
                  success:(result) => {
                    console.log(result);
                    let url = result.cookies[0];
                    this.UpLoadImg.push(url);
                    console.log(this.UpLoadImg);
                    //所有的图片都上传完毕了才触发
                    if(i===chooseImgs.length-1){
                        wx.hideLoading();
                        console.log("把文本的内容和外网的数组图片，提交到后台中");
                        //提交都成功了
                        wx.showToast({
                          title: '提交成功',
                          icon:'none',
                          duration:3000,
                          mask:true,
                        })
                        //重置页面
                        this.setData({
                            //重置页面将所有数据归于0
                            textVal:"",
                            chooseImgs:[]
                        })
                        //返回上一个页面
                        wx.navigateBack({
                          delta: 1,
                        })
                    }
                  },
                });
            })
        }else{
            wx.hideLoading();
            console.log("只提交了文本");
            //返回上一个页面
            wx.navigateBack({
              delta: 1,
            })
        }
    }
})